.wpview-type-simple-payments__wrapper {
	display: flex;
	flex-direction: column;
	padding: 10px;

	@include breakpoint-deprecated( '>480px' ) {
		flex-direction: row;
	}
}

.wpview-type-simple-payments__image-part {
	flex: 0 0 30%;
	margin-bottom: 24px;

	@include breakpoint-deprecated( '>480px' ) {
		margin-bottom: 0;
	}
}

.wpview-type-simple-payments__image-figure {
	border: 1px solid var( --color-neutral-20 );
	background-color: var( --color-neutral-0 );
	margin: 0;
	min-width: 70px;
	padding-top: calc( 100% - 2px );
	position: relative;
}

.wpview-type-simple-payments__image {
	height: auto;
	left: 50%;
	margin: 0;
	max-height: 100%;
	max-width: 100%;
	position: absolute;
	top: 50%;
	transform: translate( -50%, -50% );
	width: auto;
}

.wpview-type-simple-payments__text-part {
	flex-basis: 100%;
}

.mce-content-body
	.wpview-type-simple-payments__text-part > div:not( .wpview-type-simple-payments__pay-part ) {
	line-height: 1.7;
}

.wpview-type-simple-payments__image-part + .wpview-type-simple-payments__text-part {
	@include breakpoint-deprecated( '>480px' ) {
		flex-basis: 70%;
		padding-left: 24px;
	}
}

.wpview-type-simple-payments__title {
	font-weight: 600;
	margin-bottom: 24px;
}

.wpview-type-simple-payments__description {
	margin-bottom: 24px;
}

.wpview-type-simple-payments__price-part {
	font-weight: 600;
	margin-bottom: 24px;
}

.wpview-type-simple-payments__pay-part {
	display: flex;
}

.wpview-type-simple-payments__pay-quantity {
	flex: 0 0 auto;
	margin-right: 10px;
}

.wpview-type-simple-payments__pay-quantity-input {
	border: 1px solid var( --color-neutral-20 );
	padding: 6px 8px;
	max-width: 42px;
}

.wpview-type-simple-payments__pay-paypal-button-wrapper {
	flex: 0 0 auto;
}

.wpview-type-simple-payments__pay-paypal-button-content {
	box-sizing: border-box;
	height: 24px;
	position: relative;
	text-align: center;
	top: 50%;
	transform: translateY( -50% );
	width: 144px;
	padding: 4px 8px;
}

.wpview-type-simple-payments__pay-paypal-button-content::before {
	bottom: -1px;
	content: '';
	height: 24px;
	left: -1px;
	position: absolute;
	right: -1px;
	width: 144px;
	background: rgba( 0, 0, 0, 0 ) linear-gradient( rgb( 245, 245, 245 ), rgb( 204, 204, 204 ) )
		repeat scroll 0 100% / auto padding-box border-box;
	border-radius: 2px;
	padding: 1px;
}

.wpview-type-simple-payments__pay-paypal-button-text {
	display: inline-block;
	height: 12px;
	position: relative;
	text-align: left;
	text-shadow: rgb( 204, 204, 204 ) 0 -1px;
	top: 50%;
	width: 43px;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: $font-body-extra-small;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	transform: translateY( -50% );
	vertical-align: top;
}

.wpview-type-simple-payments_paypal-logo {
	display: inline-block;
	height: 17px;
	position: relative;
	vertical-align: top;
	width: 53px;
	background-image: url( '/calypso/images/simple-payments/paypal-logo.svg' );
	background-size: 53px 17px;
}

.wpview-type-simple-payments__unsupported {
	align-items: center;
	background-color: var( --color-surface );
	border: 2px solid var( --color-border-inverted );
	border-radius: 2px;
	box-shadow: 0 0 0 1px var( --color-neutral-10 ), 0 1px 2px var( --color-neutral-0 );
	display: flex;
	flex-flow: row;
	flex-wrap: nowrap;
	padding: 1em;
	.wpview-type-simple-payments__unsupported-icon {
		flex-shrink: 1;
		flex-grow: 0;
		fill: var( --color-error );
		line-height: 0;
		margin-right: 1em;
	}
	.wpview-type-simple-payments__unsupported-message {
		flex-grow: 1;
		line-height: 1.7;
	}
}
